<template>
    <div>
      <div style="text-align: center">学生管理页面</div>
      <p></p>
      <button v-on:click="getAllStudents">获取全部学生</button>
      <div v-for="student in students" v-bind:key=student.id>
        {{student}}
      </div>
      <p></p>
      <div>请输入查询学生信息的id：
        <input v-model="queryId">
      </div>
      <button v-on:click="getStudentById">通过id获取指定学生</button>
      <div>{{studentById}}</div>
      <p></p>
      <div>请输入要添加的学生信息：
        <div>
          student_id:
          <input v-model="addstudentid">
        </div>
        <div>
          name:
          <input v-model="addstudentname">
        </div>
        <div>
          class:
          <input v-model="addclass">
        </div>
        <div>
          telephone:
          <input v-model="addtelephone">
        </div>
        <div>
          qq:
          <input v-model="addqq">
        </div>
      </div>
      <button v-on:click="addUser">添加学生</button>
      <p></p>
      <div>
        请输入要修改的学生信息：
        <div>
          id:
          <input v-model="id">
        </div>
        <div>
          student_id:
          <input v-model="updatestudentid">
        </div>
        <div>
          name:
          <input v-model="updatestudentname">
        </div>
        <div>
          class:
          <input v-model="updateclass">
        </div>
        <div>
          telephone:
          <input v-model="updatetelephone">
        </div>
        <div>
          qq:
          <input v-model="updateqq">
        </div>
      </div>
      <button v-on:click="updateStudent">修改学生</button>
      <p></p>
      <div>
        请输入删除学生的id：
        <input v-model="deleteId">
        <div>
          <button v-on:click="deleteStudent">删除用户</button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  
  export default {
    name: "Student",
    data() {
      return {
        students: null,
        queryId: null,
        studentById: null,
        addstudentid:null,
        addstudentname: null,
        addclass: null,
        addtelephone:null,
        addqq:null,
        updatestudentid:null,
        updatestudentname: null,
        updateclass: null,
        updatetelephone:null,
        updateqq:null,
        id: null
      }
    },
    methods: {
      getAllStudents() {
        axios.get("http://localhost:8081/AllStudents")
            .then(resp => {
              console.log(resp);
              this.students= resp.data;
            })
      },
      getStudentById() {
        axios.get(`http://localhost:8081/student/${this.queryId}`)
            .then(resp => {
              console.log(resp);
              this.studentById = resp.data;
            })
      },
      addUser() {
        axios.post("http://localhost:8081/student", {
          student_id: this.addstudentid,
          name: this.addstudentname,
          class: this.addclass,
          telephone: this.addtelephone,
          qq: this.addqq
        })
            .then(resp => {
              console.log(resp);
            })
      },
      updateStudent() {
        axios.put("http://localhost:8081/student", {
          id: this.id,
          student_id: this.updatestudentid,
          name: this.updatestudentname,
          class: this.updateclass,
          telephone: this.updatetelephone,
          qq: this.updateqq
        }).then(resp => {
          console.log(resp);
        })
      },
      deleteStudent() {
        axios.delete("http://localhost:8081/student", {
          params: {
            id: this.deleteId
          }
        }).then(resp => {
          console.log(resp);
        })
      },
    }
  }
  </script>
  
  <style scoped>
  
  </style>